<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子节点操作</title>
</head>

<body>
    <div class="fat">
        <button>删除</button>
        <span class="son"> 
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </span>
        <span>bro</span>
    </div>
    <script>
        var son = document.querySelector('.son');
        console.log(son.parentNode); //得到的是离元素最近的父节点
        console.log(son.childNodes); //会获取所有文本节点及元素节点，不建议使用
        console.log(son.children); //通用写法
        console.log(son.firstChild); //第一个子节点,与childNodes相同会获取所有节点，不建议使用
        console.log(son.lastChild); //最后一个子节点
        console.log(son.firstElementChild); //通用写法
        console.log(son.lastElementChild);
        console.log(son.children[0]); //实际开发写法，兼容
        console.log(son.children[son.children.length - 1]);

        console.log(son.nextSibling); //下一个兄弟节点，包括文本节点和元素节点,不常用
        console.log(son.previousSibling); //上一个兄弟节点。没有则返回NULL
        console.log(son.nextElementSibling); //兄弟节点的常用写法，只获取元素节点
        console.log(son.previousElementSibling);
        /*       function getNextElementSibling(element) {//兄弟节点解决兼容性问题
                  var el=element;
                  while(el=el.nextSibling){
                      if(el.nodeType===1){
                          return el;
                      }
                  }
                  return null;
                } */
        //创建元素节点
         var li = document.createElement('li');
        var li1 = document.createElement('li');
        //添加节点
        son.appendChild(li); //在父元素尾部生成一个新的元素节点
        son.insertBefore(li1, son.children[0]); //在父元素头部生成一个新的元素节点

        //删除节点
        var btn = document.querySelector('button');
        btn.onclick = function () {
            if (son.children.length==0) {
                this.disabled = true;
            } else {
                son.removeChild(son.children[0]);
            }
        }
        //复制节点
        var li2=son.children[1].cloneNode(true);//括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        son.appendChild(li2);

    </script>
</body>

</html>